<template>
<div class="header">
    <router-link to="/Home"><span class="iconfont icon-xiangzuo"></span></router-link>
    <div class="top">{{head.name}}
    <span class="concern">+ 关注</span>
    </div>
    <router-link to="/Sousuo"><span class="iconfont icon-Magnifier"></span></router-link>
    


</div>
    
</template>

<script>
//chuang

export default {
    name:"HeaderDian",
    props:['head'],
    data(){
        return{

        }
    },
    mounted(){
        window.addEventListener("scroll",this.colorChange);
    },
    destroyed(){
        window.removeEventListener("scroll",this.colorChange)
    },
    methods:{
        colorChange(){
            let oHead = document.querySelector(".header");
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            let speed = 0.1;
            // console.log(oHead.offsetHeight);
            if(scrollTop>= 0 && scrollTop <= 200){
                oHead.style.backgroundColor = `rgba(247, 6, 6, ${Math.ceil(scrollTop/20)/10})`;
            }else{
                oHead.style.backgroundColor = "rgba(247, 6, 6, 1)";
            }
        }
    }
    
}
</script>

<style scoped>
.header{
    height: .5rem;
    width: 100%;
    box-sizing:border-box;
    background-color: rgba(247, 6, 6, 0);
    display: flex;
    justify-content: space-between;
    line-height: .5rem;
    padding:0 .1rem;
    color:white;
    position: fixed;
    z-index: 10;
    top: 0;
    /* border-top: 1px solid transparent; */
}
.iconfont{
    font-size:.2rem;
    color:white;
}
.concern{
    font-size:.14rem;
    display: inline-block;
    line-height: .26rem;
    text-align: center;
    background-color:rgba(253, 249, 249, 0.5);
    border-radius: .15rem;
    height: .26rem;
    width: .5rem;
    
}
.top{
    height: 100%;
    line-height: .5rem;
}


</style>